<template>
<div>
  <div class="banner" @click="handleBannerClick">
      <img :src="bannerImg" class="banner-img">
      <div class="banner-icon">
          <span class="icon iconfont">&#xe64a;</span>
          <em class="number">{{ gallaryImgs.length }}</em>
      </div>
      <div class="banner-title">{{ sightName }}</div>
  </div>
  <fade-animation>
    <common-gallary
    v-show="showGallary"
    :Imgs="gallaryImgs"
    @close="handleGallaryClose"
    >
    </common-gallary>
  </fade-animation>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/gallary'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'Banner',
  data () {
    return {
      showGallary: false
    }
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  methods: {
    handleGallaryClose () {
      this.showGallary = false
    },
    handleBannerClick () {
      this.showGallary = true
    }
  },
  components: {
    CommonGallary,
    FadeAnimation
  }
}
</script>
<style lang="stylus" scoped>
    .banner
      position relative
      .banner-img
        width 100%
      .banner-icon
        padding 0 .2rem
        height .4rem
        line-height .4rem
        text-align center
        background rgba(0,0,0,.5)
        border-radius .2rem
        position absolute
        color #fff
        font-size .24rem
        left .2rem
        bottom .86rem
        .icon
          font-size .25rem
      .banner-title
        position absolute
        font-size .36rem
        bottom .36rem
        left .2rem
        color #fff
        right .2rem
</style>
